<template>
  <div>
    {{ getOrderQueueFirst() }} {{ getOrderQueue() }}
    <div class="title"></div>
    <div class="queueBody">
      <el-table :data="orderQueue" style="width: 100%" :header-cell-style="{background:'#DCDCDC',color:'#606266'}">
        <el-table-column width="150" prop="sortId" label="排队号" header-align="center" align="center"></el-table-column>
        <el-table-column width="250" prop="orderID" label="订单号" header-align="center" align="center"></el-table-column>

        <el-table-column width="800" label="商品信息" header-align="center">
          <template slot-scope="s">
            <span class="goodsSpan" v-for="(o,i) in s.row.orderInfo.goodsList">
              <br/>
              <el-tag>{{ o.drink.name }}</el-tag>
              <el-tag type="success">{{ o.drink.cupSize }} | {{ ((o.drink.price) / 100).toFixed(2) }}元</el-tag>
              <el-tag type="warning">{{ o.drink.tempJsonStr }}</el-tag>
              <el-tag type="danger">{{ o.drink.sweetnessJsonStr }}</el-tag>
              <span class="spanLen"></span>
              <el-tag v-for="(e,n) in o.drink.entremetsList">{{ e.name }} | {{ ((e.price) / 100).toFixed(2) }}元</el-tag>
              <span class="spanLen2"></span>
              <el-tag type="danger">{{ o.count }}份 共{{ ((o.cost) / 100).toFixed(2) }}元</el-tag>
              <br/>
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="总花费" header-align="center" align="center">
          <template slot-scope="s">
            <span>{{ ((s.row.cost) / 100).toFixed(2) }}元</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="s">
            <el-button type="success" size="mini" @click="finish(s.$index,s.row)" plain>确认完成</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "OrderQueueM",
  data() {
    return {
      refreshF: 0,
      refresh: 1,

      orderQueue: []
    }
  },
  methods: {

    getOrderQueueFirst: function () {
      if (this.refreshF === 0) {
        this.refreshF++;
        var that = this;
        axios.get("http://localhost:8081/order/queue/first").then(res => {
          that.orderQueue = res.data.data;
          that.refresh = 0;
        })
      }
    },

    getOrderQueue: function () {
      if (this.refresh === 0) {
        this.refresh++;
        var that = this;
        axios.get("http://localhost:8081/order/queue").then(res => {
          that.orderQueue = res.data.data;
          that.refresh = 0;
        })
      }
    },
    finish: function (index, order) {
      this.orderQueue.splice(index, 1);
      var that = this;
      axios.put("http://localhost:8081/order", order).then(res => {
        that.messageAlert(res.data.status, res.data.msg);
      })
    },

    messageAlert: function (flag, msg) {
      if (flag === 1) {
        this.$message({
          message: msg,
          center: true,
          type: "success"
        })
      } else {
        this.$message({
          message: msg,
          center: true,
          type: "error"
        })
      }
    }
  }
}
</script>

<style scoped>
.spanLen {
  margin-left: 10px;
}

.goodsSpan {
  font-weight: bolder;
}

.spanLen2 {
  margin-left: 20px;
}
</style>
